<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <article-item
          v-for="item in list"
          :key="item.art_id"
          :artItem="item"
          @dislikeEV="dislikeFn"
          @reportEV="reportFn"
          @click.native="itemClickFn(item.art_id)"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from "../../../components/ArticleItem.vue";
import {
  getAllArticleListAPI,
  dislikeArticleAPI,
  reportArticleAPI,
} from "@/api";
import { Notify } from "vant";
export default {
  props: {
    // list: Array, //父组件Home传来的文章列表数据的数组
    channelId: Number, //频道id
  },
  components: { ArticleItem },
  name: "ArticleList",
  data() {
    return {
      list: [], //文章列表数据的数组
      loading: false, //底部加载状态
      finished: false, //底部完成状态
      theTime: new Date().getTime(), //用于分页
      isLoading: false, //顶部加载状态
    };
  },
  async created() {
    // const { data: res } = await getAllArticleListAPI({
    //   channel_id: this.channelId,
    //   timestamp: this.theTime,
    // });
    // console.log(res);

    // this.list = res.data.results;
    // // 获取第十条的pre_timestamp值
    // this.theTime = res.data.pre_timestamp;
    // 直接调用（封装好的）
    this.getArticleListFn();
  },
  methods: {
    // 专门负责发送请求的
    async getArticleListFn() {
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime,
      });
      // console.log(res);
      // pre_timestamp
      // 下一篇开头的那一篇文章的时间戳
      // 第一次 系统时间（tiemstamp->后台 返回0-9条数据->携带第十条的pre_timestamp值返回
      //第二次加载时（tiemstamp），要传上一次的pre_timestamp（代表告诉后台，从指定的时间戳里再往后找10个）
      // 10-19条数据，携带第20条的pre_timestamp值返回，如此反复.....
      // 数组合并
      // created()上来第一次list是空数组，合并空数组没问题
      // onload()触底加载更多，2个数组合并也没问题
      this.list = [...this.list, ...res.data.results];
      // 保存下一页的时间戳
      this.theTime = res.data.pre_timestamp;

      //因为这边是异步的，避免先执行这里的代码，所以全放进来
      // created()上来走一次，loading没触底本身就是false，但是给false也没问题
      // 为了一会onload()调用时，才有用
      // 关闭加载状态
      this.loading = false; //如果不关闭，底部一直是加载中状态，下次处理不会再触发onload事件
      if (res.data.pre_timestamp === null) {
        //本次回来的数据是最后的，没有下一段的数据了
        this.finished = true;

        // 4.顶部加载状态改为false
        this.isLoading = false;
      }
    },
    // 底部加载的事件方法(触底事件)
    async onLoad() {
      if (this.list.length === 0) {
        return; //如果页面没有数据。则不执行下面代码
      }
      // 调用方法
      this.getArticleListFn();

      // const { data: res } = await getAllArticleListAPI({
      //   channel_id: this.channelId,
      //   timestamp: this.theTime,
      // });
      // console.log(res);

      // // 数组合并
      // this.list = [...this.list, ...res.data.results];
      // this.theTime = res.data.pre_timestamp;
    },
    // 顶部刷新数据事件方法
    async onRefresh() {
      //1. 清空list数组内容，来一份新数据
      this.list = [];
      //2. 分页的时间戳回到当前的时间戳
      this.theTime = new Date().getTime();
      //3.然后再次发起请求
      // 调用方法
      // this.getArticleListFn();
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime,
      });
      console.log(res);
      // 数组合并
      this.list = [...this.list, ...res.data.results];
      this.theTime = res.data.pre_timestamp;
      // 4.顶部加载状态改为false
      this.isLoading = false;
    },
    // 反馈不感兴趣的函数(数据从父组件传来)
    async dislikeFn(id) {
      await dislikeArticleAPI({ artId: id });
      // res里没啥有用的信息，所以await往下放行，就证明请求和响应成功，反馈成功
      // console.log(res);
      Notify({
        type: "success",
        message: "反馈成功",
      });
    },
    // 反馈垃圾内容的方法(数据从父组件传来)
    async reportFn(id, value) {
      await reportArticleAPI({
        artId: id,
        type: value,
      });
      Notify({ type: "success", message: "举报成功" });
    },
    // 文章单元格点击事件
    itemClickFn(id) {
      this.$router.push({
        path: `/detail?art_id=${id}`,
      });
    },
  },
};
</script>

<style>
</style>